<template>
    <div class="role">
        <el-row>
            <h2>角色权限管理</h2>
        </el-row>
        <el-row class="mt10" >
            <el-button type="primary" @click="dialogVisible=true">新增角色</el-button>
        </el-row>
        <el-table class="mt10" :data="roleList" style="width: 100%" border>
            <el-table-column type="index" label="#" center ></el-table-column>
            <el-table-column prop="level" label="级别" width="180" >
                <template #default="scope">
                    {{scope.row.level}}
                </template>
            </el-table-column>
            <el-table-column prop="color" label="颜色属性"  >
                 <template #default="scope">
                     <el-tag :color="scope.row.color">{{scope.row.color}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="namestar" label="权限名称" >
                <template #default="scope">
                    {{scope.row.namestar}}
                </template>
            </el-table-column>
          
            <el-table-column label="操作" >
                <template #default="scope">
                   <el-button type="danger" size="small" @click="showUpdateDialog(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            v-model="dialogVisible"
            title="新增权限角色"
            width="30%"
            :before-close="handleClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="form"
                class="myform"
                ref="aform"
                :rules="rules"
            >   
                <el-form-item 
                    label="角色名称"
                    prop="namestar"
                >
                    <el-input clearable  v-model="form.namestar"    type="text"  placeholder="请输入" />
                </el-form-item>
                <el-form-item 
                    label="角色属性"
                    prop="color"
                >
                    <el-input   v-model="form.color"    type="color"  />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="danger" @click="submitAddForm"
                    >添加</el-button
                    >
                </span>
            </template>
        </el-dialog>


        <el-dialog
            v-model="updateVisible"
            title="修改权限角色信息"
            width="30%"
            :before-close="updateClose"
        >
            <el-form
                label-position="top"
                label-width="100px"
                :model="uform"
                class="myform"
                ref="updateform"
                :rules="rules"
            >   
                <el-form-item 
                    label="角色名称"
                    prop="namestar"
                >
                    <el-input clearable  v-model="uform.namestar"    type="text"  placeholder="请输入" />
                </el-form-item>
                <el-form-item 
                    label="角色属性"
                    prop="color"
                >
                    <el-input   v-model="uform.color"    type="color"  />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updateClose">取消</el-button>
                    <el-button type="warning" @click="submitUpdateForm"
                    >修改</el-button
                    >
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script>
import { computed, onMounted, reactive,toRefs,ref  } from '@vue/runtime-core'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import {ajax} from "@/api"
export default {
    setup(){
        const store = useStore()
        const aform = ref()
        const updateform = ref()
        const state = reactive({
            dialogVisible:false,
            updateVisible:false,
            form:{},
            uform:{},
            rules:{
                namestar:[
                    {required:true,message:'请输入'}
                ],
                color:[
                    {required:true,message:'请选择'}
                ]
            }
        })
        onMounted(()=>{
            store.dispatch("getRoleInfo")
        })
        const roleList = computed(()=>store.state.roleList)
        const handleClose = ()=>{state.dialogVisible= false}
        const submitAddForm = ()=>{
            aform.value.validate(async (valid)=>{
                if(valid){
                    var id = 1;
                    if(store.state.roleList.length>0){
                        // id = store.state.roleList[store.state.roleList.length-1].id + 1; 
                        id = store.state.roleList.length+1
                        console.log(id,typeof id);
                    }
                    let {code,data} = await ajax.addRole({
                        ...state.form,
                        id:id,
                        level:id,
                    })
                    state.dialogVisible = false;
                    if(code==200){
                        store.dispatch("getRoleInfo")
                        state.form = {}
                    }
                }else{
                    ElMessage.error("请输入有效的数据信息")
                }
            })
        }

        const updateClose = ()=>{
            state.updateVisible = false;
            state.uform = {}
        }
        const submitUpdateForm = ()=>{
            updateform.value.validate(async valid=>{
                if(valid){
                    console.log(state.uform);
                    let {code,result} = await ajax.updRole(state.uform)
                    if(code==200){
                        store.dispatch("getRoleInfo")
                    }
                    state.updateVisible = false;
                    state.uform = {}

                }else{
                    ElMessage.error("请输入有效的权限信息")
                }

            })
        }
        const showUpdateDialog = (item)=>{
            console.log(item);
            state.updateVisible = true; 
            state.uform = {...item}
        }
        const changeDisabled = async (item)=>{
            console.log(item)
            let {code,result} = await ajax.updRole({
                _id:item._id,
                disabled:item.disabled
            })
            if(code==200){
                store.dispatch("getRoleInfo")  // 重新请求数据
            }
        }
        return {
            roleList,
            handleClose,
            ...toRefs(state),
            aform,
            submitAddForm,
            updateform,
            updateClose,
            submitUpdateForm,
            showUpdateDialog,
            changeDisabled
        }
    }
}
</script>